<template>
  <div class="tab-pane-cover">
    <div class="tab-box nav-menu">
      <div class="nav-menu-title">
        <span class="title">
          {{
            $srv.getI18nByPath(
              'oSetupPanel.SetupAttrMenu.navigationandgrouping'
            )
          }}
        </span>
        <div class="fl-right">
          <Button class="select" type="primary" size="small" @click="selectNav">
            {{
              $srv.getI18nByPath('oSetupPanel.SetupAttrMenu.selectnavigation')
            }}
          </Button>
          <Button
            class="select"
            type="primary"
            size="small"
            @click="selectGroup"
          >
            {{ $srv.getI18nByPath('oSetupPanel.SetupAttrMenu.selectgroup') }}
          </Button>
        </div>
      </div>
      <div v-show="navMenu != ''" class="result-cover">
        <b>
          {{ $srv.getI18nByPath('oSetupPanel.SetupAttrMenu.navigation') }}
          ：
        </b>
        <span class="result r-nav">
          {{ $srv.getI18nBySrv(navMenu) }}
          <Icon @click="removeNavMenu" type="md-close" />
        </span>
      </div>
      <div v-show="groupMenu != ''" class="result-cover">
        <b>
          {{ $srv.getI18nByPath('oSetupPanel.SetupAttrMenu.group') }}
          ：
        </b>
        <span class="result r-menu">
          {{ $srv.getI18nBySrv(groupMenu) }}
          <Icon @click="removeGroupMenu" type="md-close" />
        </span>
      </div>
    </div>
    <Divider />
    <div class="divider-empty-thin"></div>
    <div class="tab-box">
      <span class="title">
        {{ $srv.getI18nByPath('oSetupPanel.SetupAttrMenu.parentfunction') }}
      </span>
      <Select
        v-model="parentMenu.current"
        filterable
        remote
        clearable
        @on-open-change="parentMenuSearch"
        @on-change="parentMenuChange"
        :remote-method="parentMenuSearch"
        :loading="parentMenu.loading"
        @on-clear="removeParentMenu"
        >>
        <Option
          v-for="item of parentMenu.list"
          :value="item.value"
          :key="item.value"
          >{{ item.label }}</Option
        >
      </Select>
    </div>
  </div>
</template>
<script lang="ts">
import { I_command, Tsrv, T_srv, vue, ifs } from './config';

interface DropDownElement {
  label: string;
  value: any;
}

@T_srv.comp
export default class SetupAttrMenu extends vue {
  @T_srv.prop() isChange!: boolean;

  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  /* 组件名 */
  private G_compName: string = 'SetupAttrMenu';

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  private current: any = null;

  private navMenu: string = '';

  private navMenuID: number = null;

  private groupMenu: string = '';

  private GT_command: I_command = null;

  private parentMenu: {
    current: string;
    loading: boolean;
    list: DropDownElement[];
  } = {
    current: '',
    loading: false,
    list: []
  };

  @T_srv.watch('isChange')
  private componentChanged(val?: boolean) {
    this.current = this.GT_command.Tsetup.component.current;
    this.releaseFromConfig();
  }

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_command = this.GT_compBox.getCompMergeName(
      this.G_compID,
      'oSetupPanelCMD'
    );
  }

  mounted() {
    this.componentChanged();
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
  }

  beforeDestroy() {
    this.$bus.$off('magic-setup-menu');
    this.$bus.$off('magic-setup-group');
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
    /* 如果是动态组件可能会关闭全局compBox */
    // this.GT_compBox = null
  }

  /**
   * 选择导航
   */
  private selectNav() {
    Tsrv.utils
      .createModal('oMagicBox', {
        source: {
          funid: 3,
          field: '_sys_fun_group',
          limit: 1
        },
        config: {
          isFunLayout: false
        }
      })
      .then(data => {
        if (data && data.length > 0) {
          if (this.navMenu !== data[0].title) {
            this.navMenu = data[0].title;
            this.navMenuID = data[0].id;
            this.groupMenu = '';
          }
        }
        this.saveChanges();
      });
  }

  /**
   * 选择功能组
   */
  private selectGroup() {
    Tsrv.utils
      .createModal('oMagicBox', {
        source: {
          funid: 3,
          field: '_sys_fun_group_detail',
          limit: 1,
          filter: {
            initSearch: { field: '_sys_fun_group_id', value: this.navMenuID }
          }
        },
        config: {
          isFunLayout: false
        }
      })
      .then(data => {
        if (data && data.length > 0) {
          this.groupMenu = data[0].group_name;
        }
        this.saveChanges();
      });
  }

  /**
   * 父功能搜索
   */
  private parentMenuSearch() {
    if (this.groupMenu !== '') {
      if (this.parentMenu.list.length === 0) {
        Tsrv.httpReqV1
          .getPartData('_sys_menu', {
            PageNo: 1,
            PageSize: 10,
            Params: {
              lang: 'zh-CN',
              globalSearch: '',
              filter: [
                {
                  field: 'group_name',
                  value: this.groupMenu
                }
              ],
              sort: []
            }
          })
          .then((res: any) => {
            this.parentMenu.list = [];
            res.data.rows.forEach((el: any) => {
              const newEle: DropDownElement = {
                value: el.title,
                label: Tsrv.getI18nBySrv(el.title)
              };
              this.parentMenu.list.push(newEle);
            });
          });
      }
    }
  }

  /**
   * 父功能变化
   */
  private parentMenuChange() {
    this.saveChanges();
  }

  /**
   * 移除导航
   */
  private removeNavMenu() {
    this.navMenu = '';
    this.navMenuID = null;
    this.saveChanges();
  }

  /**
   * 移除菜单组
   */
  private removeGroupMenu() {
    this.groupMenu = '';
    this.saveChanges();
  }

  /**
   * 移除父功能
   */
  private removeParentMenu() {
    this.parentMenu.current = '';
    this.saveChanges();
  }

  /**
   * 保存数据
   */
  private saveChanges() {
    delete this.current['menu'];
    if (this.current.name !== 'BaseTab') {
      this.current['menu'] = {
        nav: this.navMenu,
        navID: this.navMenuID,
        group: this.groupMenu,
        parent: this.parentMenu.current || ''
      };
    }
    this.$emit('save-changes');
  }

  /**
   * 导出数据
   */
  private releaseFromConfig() {
    this.navMenu = '';
    this.navMenuID = null;
    this.groupMenu = '';
    this.parentMenu = {
      current: '',
      loading: false,
      list: []
    };
    if (this.current !== null) {
      if (this.current.name !== 'BaseTab' && this.current['menu']) {
        const menu = this.current['menu'];
        this.navMenu = menu.nav;
        this.navMenuID = menu.navID;
        this.groupMenu = menu.group;
        this.parentMenu.current = menu.parent;
      }
    }
  }
}
</script>
<style scoped lang="scss">
.nav-menu,
.group-menu {
  margin-bottom: 10px;
}
.nav-menu {
  .nav-menu-title {
    overflow: hidden;
    div {
      display: inline-block;
    }
    .title {
      display: inline !important;
    }
    .select {
      margin: 6px 0 10px 6px;
      // float: right;
    }
  }

  .result-cover {
    display: flex;
    flex-direction: row;
    line-height: 40px;
    b {
      padding-right: 10px;
    }
    .result {
      display: block;
      line-height: 30px;
      text-align: center;
      margin: 5px 0;
      border-radius: 2px;
      flex: 1;
      &.r-nav {
        background-color: #e5e6e7;
      }
      &.r-menu {
        background-color: #f1f1f1;
      }
      .ivu-icon {
        float: right;
        padding: 9px;
        cursor: pointer;
      }
    }
  }
}
</style>
